{% extends "base.html" %}
{% block main %}
<div class="columns is-multiline">
  <div class="column is-half uniform-height" id="as_star"></div>
  <div class="column is-half uniform-height" id="exynos_star"></div>
  <div class="column is-full uniform-height" id="snapdragon_star"></div>
  <div class="column is-full uniform-height" id="kirin_star"></div>
  <div class="column is-full uniform-height" id="mtk_star"></div>
  <div class="column is-full uniform-height" id="unisoc_star"></div>
</div>
{% endblock %}

{% block js %}
<script>
document.getElementById("phone_soc_mfrs_sales_star_url").classList.add("is-active");
document.getElementById("page_title").innerText = "手机SoC制造商销量明星";
</script>

<script>
// 苹果A系列SoC销量明星柱状图
let as_star_dom = document.getElementById("as_star");
let as_star_chart = echarts.init(as_star_dom);
let as_star_option = {
  title: {
    text: "苹果A系列SoC销量明星",
    left: "5%"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: "shadow"        // 默认为直线，可选为："line" | "shadow"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: {{ as_model | tojson }},
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value} 万片",
         textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  series: [
    {
      name: "销量(片)",
      type: "bar",
      barWidth: "60%",
      data: {{ as_mt | tojson }}
    }
  ]
};
as_star_chart.setOption(as_star_option);
</script>

<script>
// 紫光展锐SoC销量明星柱状图
let unisoc_star_dom = document.getElementById("unisoc_star");
let unisoc_star_chart = echarts.init(unisoc_star_dom);
let unisoc_star_option = {
  title: {
    text: "紫光展锐SoC销量明星",
    left: "5%"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: "shadow"        // 默认为直线，可选为："line" | "shadow"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: {{ unisoc_model | tojson }},
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value} 万片",
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  series: [
    {
      name: "销量(片)",
      type: "bar",
      barWidth: "60%",
      data: {{ unisoc_mt | tojson }}
    }
  ]
};
unisoc_star_chart.setOption(unisoc_star_option);
</script>

<script>
// 三星猎户座SoC销量明星柱状图
let exynos_star_dom = document.getElementById("exynos_star");
let exynos_star_chart = echarts.init(exynos_star_dom);
let exynos_star_option = {
  title: {
    text: "三星猎户座SoC销量明星",
    left: "5%"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: "shadow"        // 默认为直线，可选为："line" | "shadow"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: {{ exynos_model | tojson }},
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value} 万片",
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  series: [
    {
      name: "销量(片)",
      type: "bar",
      barWidth: "60%",
      data: {{ exynos_mt | tojson }}
    }
  ]
};
exynos_star_chart.setOption(exynos_star_option);
</script>

<script>
// 高通骁龙SoC销量明星柱状图
let snapdragon_star_dom = document.getElementById("snapdragon_star");
let snapdragon_star_chart = echarts.init(snapdragon_star_dom);
let snapdragon_star_option = {
  title: {
    text: "高通骁龙SoC销量明星",
    left: "5%"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: "shadow"        // 默认为直线，可选为："line" | "shadow"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: {{ snapdragon_model | tojson }},
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value} 万片",
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  series: [
    {
      name: "销量(片)",
      type: "bar",
      barWidth: "60%",
      data: {{ snapdragon_mt | tojson }}
    }
  ]
};
snapdragon_star_chart.setOption(snapdragon_star_option);
</script>

<script>
// 海思麒麟SoC销量明星柱状图
let kirin_star_dom = document.getElementById("kirin_star");
let kirin_star_chart = echarts.init(kirin_star_dom);
let kirin_star_option = {
  title: {
    text: "海思麒麟SoC销量明星",
    left: "5%"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: "shadow"        // 默认为直线，可选为："line" | "shadow"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: {{ kirin_model | tojson }},
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value} 万片",
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  series: [
    {
      name: "销量(片)",
      type: "bar",
      barWidth: "60%",
      data: {{ kirin_mt | tojson }}
    }
  ]
};
kirin_star_chart.setOption(kirin_star_option);
</script>

<script>
// 联发科SoC销量明星柱状图
let mtk_star_dom = document.getElementById("mtk_star");
let mtk_star_chart = echarts.init(mtk_star_dom);
let mtk_star_option = {
  title: {
    text: "联发科SoC销量明星",
    left: "5%"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: "shadow"        // 默认为直线，可选为："line" | "shadow"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: {{ mtk_model | tojson }},
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value} 万片",
        textStyle: {
          fontSize: 22,
        }
      }
    }
  ],
  series: [
    {
      name: "销量(片)",
      type: "bar",
      barWidth: "60%",
      data: {{ mtk_mt | tojson }}
    }
  ]
};
mtk_star_chart.setOption(mtk_star_option);
</script>
{% endblock %}